<template>
  <div>
    <el-form :model="queryForm" inline style="margin-left: 1%">
      <el-form-item label="付款单编号">
        <el-input v-model="queryForm.payOrderNo" placeholder="请输入付款单编号"></el-input>
      </el-form-item>
      <el-form-item label="业主姓名">
        <el-input v-model="queryForm.ownerName" placeholder="请输入业主姓名"></el-input>
      </el-form-item><br>
      <el-form-item label="付款状态">
        <el-select v-model="queryForm.payState" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账单类型">
        <el-select v-model="queryForm.billType" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收房合同编号">
        <el-input v-model="queryForm.sfContractNo" placeholder="请输入收房合同编号"></el-input>
      </el-form-item><br>
      <el-form-item  label="付款日期" style="display: inline">
        <el-col :span="11">
          <el-date-picker type="date" placeholder=" " v-model="queryForm.startDate" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" align="center"> 至 </el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="" v-model="queryForm.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 820% " @click="getList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-tabs type="border-card" v-model="receiptType"  style="width: 100%;margin-left: 1%" @tab-click="handleClick" >
      <el-tab-pane label="收房付款单" name="1">
        <el-table
          :data="insertData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="sfContractNo"
            label="收合同号"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房产信息"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="100px">
          </el-table-column>
          <el-table-column
            prop="paymentAmount"
            label="支付金额">
          </el-table-column>
          <el-table-column
            prop="payNumber"
            :formatter="formatPayNumber"
            label="账期">
          </el-table-column>
          <el-table-column
            prop="payState"
            :formatter="formatPayState"
            label="付款状态">
          </el-table-column>
          <el-table-column
            prop="billType"
            :formatter="formatBillType"
            label="账单类型">
          </el-table-column>
          <el-table-column
            prop="payableDate"
            label="应付日期">
          </el-table-column>
          <el-table-column
            prop="paidTime"
            label="付款日期">
          </el-table-column>
          <el-table-column
            prop="payMethod"
            label="支付方式"
            width="100px">
          </el-table-column>
          <el-table-column
            prop="operationUser"
            label="操作">
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryForm.pageNo"
          :limit.sync="queryForm.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <!--支出-->
      <el-tab-pane label="租务付款单"  name="2">
        <el-table
          :data="insertData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="sfContractNo"
            label="收合同号"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房产信息"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="100px">
          </el-table-column>
          <el-table-column
            prop="paymentAmount"
            label="支付金额">
          </el-table-column>
          <el-table-column
            prop="payNumber"
            :formatter="formatPayNumber"
            label="账期">
          </el-table-column>
          <el-table-column
            prop="payState"
            :formatter="formatPayState"
            label="付款状态">
          </el-table-column>
          <el-table-column
            prop="billType"
            :formatter="formatBillType"
            label="账单类型">
          </el-table-column>
          <el-table-column
            prop="payableDate"
            label="应付日期">
          </el-table-column>
          <el-table-column
            prop="paidTime"
            label="付款日期">
          </el-table-column>
          <el-table-column
            prop="payMethod"
            label="支付方式"
            width="100px">
          </el-table-column>
          <el-table-column
            prop="operationUser"
            label="操作">
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryForm.pageNo"
          :limit.sync="queryForm.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="金融服务付款单"  name="3" >
        <el-table
          :data="insertData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="sfContractNo"
            label="收合同号"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房产信息"
            width="180px">
          </el-table-column>
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="100px">
          </el-table-column>
          <el-table-column
            prop="paymentAmount"
            label="支付金额">
          </el-table-column>
          <el-table-column
            prop="payNumber"
            :formatter="formatPayNumber"
            label="账期">
          </el-table-column>
          <el-table-column
            prop="payState"
            :formatter="formatPayState"
            label="付款状态">
          </el-table-column>
          <el-table-column
            prop="billType"
            :formatter="formatBillType"
            label="账单类型">
          </el-table-column>
          <el-table-column
            prop="payableDate"
            label="应付日期">
          </el-table-column>
          <el-table-column
            prop="paidTime"
            label="付款日期">
          </el-table-column>
          <el-table-column
            prop="payMethod"
            label="支付方式"
            width="100px">
          </el-table-column>
          <el-table-column
            prop="operationUser"
            label="操作">
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryForm.pageNo"
          :limit.sync="queryForm.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {getFuKuan} from "@/api/yingye/yingye";
    export default {
        name: "shoukuan",
      data(){
        return{
          receiptType: '1',
          total:1,
          queryForm:{
            itemflag: 1,
            pageNo:1,
            pageSize:10
          },
          insertData:[],
          fee:[],
          options: [{
            value: 1,
            label: '未付款'
          }, {
            value: 2,
            label: '已付款'
          }, {
            value: 3,
            label: '已中止'
          }, {
            value: 4,
            label: '已冻结'
          },],
          options2: [{
            value: 1,
            label: '收房贷变更'
          }, {
            value: 2,
            label: '退租变更'
          }, {
            value: 3,
            label: '普通账单'
          }, {
            value: 4,
            label: '续约结算'
          },],
        }
      },
      created() {
        this.getList();
      },
      methods:{
        formatBillType(row){
          /*?==1'分期变更':'租约保理变更':'退租变更':'普通账单'*/
          /*1:未收款 2：已收款 3：已中止  4：已冻结（未收款的时候，才会变成已冻结，所以恢复冻结状态的时候，是恢复成未收款状态）*/
          if (row.billType==1){
            return this.insertData.billType='收房贷变更'
          }
          if (row.billType==2){
            return this.insertData.billType='退租变更'
          }
          if (row.billType==3){
            return this.insertData.billType='普通账单'
          }
          return this.insertData.billType='续约结算'
        },
        formatPayState(row){
          if (row.payState==1){
            return this.insertData.payState='未收款'
          }
          if (row.payState==2){
            return this.insertData.payState='已收款'
          }
          if (row.payState==3){
            return this.insertData.payState='已中止'
          }
          return this.insertData.payState='已冻结'
        },
        formatPayNumber(row){
          return this.insertData.payNumber='第'+row.payNumber+"期"
        },
        handleClick(tab, event) {
          if(tab.name == 3){
            this.queryForm.itemflag=3
            this.getList()
          }
          if(tab.name == 2){
            this.queryForm.itemflag=2
            this.getList()
          }
          if(tab.name == 1){
            this.queryForm.itemflag=1
            this.getList()
          }
        },
        getList(){
          getFuKuan(this.queryForm).then(res=>{
            this.insertData=res.data.list
            this.total=res.data.total
          })
        },
      }
    }
</script>

<style scoped>

</style>
